<template>
  <el-dialog
    title="新建活动"
    :visible.sync="visible"
    width="600px"
    :close-on-click-modal="false"
    class="dialog-container"
    @close="handlerClose"
  >
    <el-form ref="ticketForm" :model="formData" :rules="rules" size="small" label-width="92px">
      <el-form-item label="活动名称" prop="title">
        <div class="type-list">
          <el-row type="flex" align="middle" class="type-list-item">
            <el-radio v-model="formData.title_type" :label="1">新建活动</el-radio>
            <el-input v-model="formData.title" maxlength="15" show-word-limit />
          </el-row>
          <el-row type="flex" align="middle" class="type-list-item">
            <el-radio v-model="formData.title_type" :label="2">往期活动</el-radio>
            <el-select
              v-model="formData.pid"
              placeholder="输入活动名称搜索"
              filterable
              remote
              :remote-method="searchTicket"
              :loading="searchTicketLoading"
              @focus="searchTicketFocus"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.title"
                :value="item.value"
              />
            </el-select>
          </el-row>
        </div>
      </el-form-item>
      <el-form-item label="活动期号" prop="issue_no">
        <el-input v-model="formData.issue_no" maxlength="20" show-word-limit />
      </el-form-item>
      <el-form-item label="目标用户" prop="target_user_type">
        <el-radio-group v-model="formData.target_user_type">
          <el-radio v-for="op in targetUserTypeOptions" :key="op.value" :label="op.value">{{ op.title }}</el-radio>
        </el-radio-group>
        <div class="edu-tips">{{ tips[formData.target_user_type] }}</div>
      </el-form-item>
    </el-form>
    <form-footer
      slot="footer"
      :loading="confirmLoading"
      class="dialog-footer"
      @cancel="handlerClose"
      @submit="handlerConfirm"
    />
  </el-dialog>
</template>

<script>
import FormFooter from '@/components/form-footer'

export default {
  name: 'CreatedDialog',
  components: {
    FormFooter
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchTicketLoading: false,
      confirmLoading: false,
      formData: {
        title: undefined,
        title_type: 1,
        issue_no: undefined,
        pid: undefined,
        target_user_type: 0
      },
      rules: {
        title: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.formData.title_type === 1 && (this.formData.title === '' || !this.$util.isDef(this.formData.title))) {
                callback(new Error('请输入活动名称'))
              } else if (this.formData.title_type === 2 && (this.formData.pid <= 0 || !this.$util.isDef(this.formData.pid))) {
                callback(new Error('请选择往期活动'))
              }
              callback()
            }
          }
        ],
        issue_no: [{ required: true, message: '请输入活动期号', trigger: 'blur' }],
        target_user_type: [{ required: true, message: '请选择目标用户', trigger: 'blur' }]
      },
      targetUserTypeOptions: [
        { title: '全部用户', value: 0 },
        { title: '新用户', value: 1 },
        { title: '购买用户', value: 2 },
        { title: '沉默用户', value: 3 }
      ],
      tips: [
        '全部用户：所有的用户',
        '新用户：在预设时间之后注册的用户',
        '购买用户：一定时间内未购买产品/服务的用户',
        '沉默用户：一定时间内未登录的用户'
      ],
      options: []
    }
  },
  watch: {
    'formData.title_type': {
      handler() {
        this.$refs.ticketForm.validateField('title')
      }
    }
  },
  methods: {
    // 关闭后重置字段
    handlerClose() {
      this.$emit('update:visible', false);
    },
    // 保存活动
    handlerConfirm() {
      this.$refs.ticketForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          this.$http.post(
              '/admin/market/ticket/create',
              this.formData,
              ({ msg }) => {
                this.$message.success(msg)
                this.confirmLoading = false
                this.handlerClose()
                this.$emit('reload');
              },
              ({ msg }) => {
                this.$message.error(msg)
                this.confirmLoading = false
              }
          )
        }
      })
    },
    // 搜索活动
    searchTicket(keyword) {
      this.searchTicketLoading = true
      this.$http.get(
          '/admin/market/ticket/search',
          {
            keyword
          },
          ({ data }) => {
            this.options = data
            this.searchTicketLoading = false
          },
          _ => {
            this.searchTicketLoading = false
          }
      )
    },
    // 搜索框获得了焦点
    searchTicketFocus() {
      this.searchTicket()
    }
  }
}
</script>

<style scoped lang="scss">
.dialog-container {
  .type-list {
    .type-list-item {
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;
      }

      .el-select {
        width: 100%;
      }
    }
  }
}
</style>
